<!-- 生产制造->车间管理->工艺路线 -->
<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper">
            <!-- 按钮 -->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <!-- <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="()=>{showModel = 'list'}" v-show="showModel=='order'">
                                <a-icon class="btns-icon" type="unordered-list" />
                                <div class="btns-text">列表</div>
                            </div>
                            <div class="btns" @click="()=>{showModel = 'order'}" v-show="showModel=='list'">
                                <a-icon class="btns-icon" type="container" />
                                <div class="btns-text">单据</div>
                            </div>
                        </a-col> -->
                        <a-col v-if="permissions.includes('processRoute:save')" :class="editMask?'btns-disable':''" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="editMask?'':submit()">
                                <a-icon class="btns-icon" type="save" />
                                <div class="btns-text">保存</div>
                            </div>
                        </a-col>
                        <a-col v-if="permissions.includes('processRoute:examine')" :class="orderId&&voucherState == 0?'':'btns-disable'" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="orderId&&voucherState == 0?auditClick(1):''">
                                <a-icon class="btns-icon" type="audit" />
                                <div class="btns-text">审核</div>
                            </div>
                        </a-col>
                        <a-col v-if="permissions.includes('processRoute:examine')" :class="orderId&&voucherState == 1?'':'btns-disable'" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="orderId&&voucherState == 1?auditClick(0):''">
                                <a-icon class="btns-icon" type="audit" />
                                <div class="btns-text">弃审</div>
                            </div>
                        </a-col>
                        <a-col v-if="permissions.includes('processRoute:edit')" :class="editMask&&voucherState != 1?'':'btns-disable'" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="editMask&&voucherState != 1?editClick():''">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">修改</div>
                            </div>
                        </a-col>
                        <a-col v-if="permissions.includes('processRoute:delete')" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="removeData">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除</div>
                            </div>
                        </a-col>
                        <a-col v-if="permissions.includes('processRoute:add')" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="newProcess">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <div ref="print" class="credentials-wrapper" id="documents-wrapper">
                <h3 class="text-center">
                    <span class="text-name">工艺路线</span><br>
                </h3>
                <a-row style="border:1px solid #ddd;">
                    <a-col :span="8">
                        <section class="tabbl">
                            <!-- :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
                            <a-table id="route_tb" :columns="columnsList" :data-source="listData" :customRow="customTable" bordered :scroll="{x:500,y:462}" :rowClassName="rowClassName" :pagination="false">
                                <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" style="padding: 8px">
                                    <a-input v-ant-ref="c => (searchInput = c)" :placeholder="`搜索${column.title}`" v-model="searchInventoryCode" style="width: 188px; margin-bottom: 8px; display: block;" @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])" @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)" />
                                    <a-button type="primary" icon="search" size="small" style="width: 90px; margin-right: 8px" @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)">
                                        搜索
                                    </a-button>
                                    <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
                                        重置
                                    </a-button>
                                </div>
                                <a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />

                                <div slot="filterDropdownStatus" slot-scope="{ selectedKeys, confirm, column }" style="padding: 8px">
                                    <a-select v-model="searchStatus" @change="handleChangeStatus" style="width:100px;">
                                        <a-select-option value="2">
                                            全部
                                        </a-select-option>
                                        <a-select-option value="0">
                                            禁用
                                        </a-select-option>
                                        <a-select-option value="1">
                                            启用
                                        </a-select-option>
                                    </a-select>
                                    <a-button type="primary" icon="search" size="small" style="width: 90px; margin-right: 8px" @click="() => handleSearchStatus(selectedKeys, confirm, column.dataIndex)">
                                        搜索
                                    </a-button>
                                </div>
                                <a-icon slot="filterIconStatus" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />

                            </a-table>
                        </section>
                    </a-col>
                    <a-col :span="16" style="border-left:1px solid #ddd;padding:10px;">

                        <section>
                            <div><span class="audit-status" style="z-index:78" v-show="voucherState==1">已审</span></div>
                            <a-form-model :layout="formLayout">
                                <div class="header-box">
                                    <a-row class="order-dynamic-form-wrapper">
                                        <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="工艺路线编码" :rules="[{ required: true, message:'',trigger:'input'}]">
                                                <a-input v-model="dataJson.code"></a-input>
                                            </a-form-model-item>
                                        </a-col>
                                        <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="工艺路线名称" :rules="[{ required: true, message:'',trigger:'input'}]">
                                                <a-input v-model="dataJson.name"></a-input>
                                            </a-form-model-item>
                                        </a-col>

                                        <!-- <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="产品编码">
                                                <a-input v-model="dataJson.inventoryCode" onkeyup="value=value.replace(/[^\d]/g,'')" @change="handleArchiveChange(1)" @click="handlInputArchives()" style="position:relative;z-index:50"></a-input>
                                            </a-form-model-item>
                                        </a-col>
                                        <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="产品名称">
                                                <a-input v-model="dataJson.inventoryName" @change="handleArchiveChange(2)" @click="handlInputArchives()" style="position:relative;z-index:50"></a-input>
                                            </a-form-model-item>
                                        </a-col>
                                        <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="规格型号">
                                                <a-input v-model="dataJson.inventorySpecification" disabled></a-input>
                                            </a-form-model-item>
                                        </a-col> -->
                                        <!-- <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="单位">
                                                <a-input v-model="dataJson.unitName" disabled></a-input>
                                            </a-form-model-item>
                                        </a-col> -->
                                        <!-- <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="生产类型">
                                                <a-input v-model="dataJson.productionType"></a-input>
                                            </a-form-model-item>
                                        </a-col> -->
                                        <!-- <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="版本号">
                                                <a-input v-model="dataJson.versionCode"></a-input>
                                            </a-form-model-item>
                                        </a-col> -->
                                        <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="有效日期">
                                                <a-date-picker v-model="dataJson.invalidDate" @change="onChangeDate" />
                                            </a-form-model-item>
                                        </a-col>
                                        <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="描述">
                                                <a-input v-model="dataJson.remarks"></a-input>
                                            </a-form-model-item>
                                        </a-col>
                                        <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="状态">
                                                <a-select v-model="dataJson.status">
                                                    <a-select-option :value="1" label="">
                                                        启用
                                                    </a-select-option>
                                                    <a-select-option :value="0" label="">
                                                        禁用
                                                    </a-select-option>
                                                </a-select>
                                            </a-form-model-item>
                                        </a-col>
                                    </a-row>
                                </div>
                                <div class="table-box">
                                    <a-table id="process_edit_tb" class="atable-edit" :columns="columns" :customRow="customClick" :data-source="dataSource" :pagination="false" bordered :scroll="{x:1000,y:384}">
                                        <template v-for="item in editColumnArraya" :slot="item" slot-scope="text, record ,index">
                                            <div :key="item">
                                                <editable-cell v-if="isRouterAlive" :record="record" :col="item" :text="text" @change="onCellChange(index, item, $event)" />
                                            </div>
                                        </template>
                                    </a-table>
                                </div>
                                <div class="footer-box">
                                    <a-row class="order-dynamic-form-wrapper">
                                        <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="修改人">
                                                <a-input v-model="dataJson.updateUserName" :disabled="true" />
                                            </a-form-model-item>
                                        </a-col>
                                        <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="修改时间">
                                                <a-input v-model="dataJson.updateDate" :disabled="true" />
                                            </a-form-model-item>
                                        </a-col>
                                        <!-- <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="备注">
                                                <a-input v-model="dataJson.remarks" :disabled="true" />
                                            </a-form-model-item>
                                        </a-col> -->
                                        <!-- <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="状态">
                                                {{dataJson.status=0?'停用':'正常'}}
                                            </a-form-model-item>
                                        </a-col> -->
                                    </a-row>
                                </div>
                            </a-form-model>
                            <div class="edit-mask-route" v-show="editMask">
                                <!-- 遮罩（点击修改关闭遮罩） -->
                            </div>
                            <!-- <searchArchives v-if="maskArchives" ref="searchArchivesRef" :checkType="checkType" :inventoryDomTop="inventoryDomTop" :inventoryDomRight="inventoryDomRight" :inputType="1" :inputVal="inputVal" @closeArchives="closeArchives" @check="checkArchives"></searchArchives> -->
                            <div class="mask-archives" v-show="maskArchives" @click="closeArchives"></div>
                        </section>
                    </a-col>
                </a-row>

            </div>
            <div class="contextmenu-box">
                <!-- 右键菜单 -->
                <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
                    <li @click="handleAdd()">新增行</li>
                    <li @click="handleDelete()">删除行</li>
                    <!--  <li @click="handleCopy()">复制行</li> -->

                </ul>
            </div>
        </div>

        <!--加载中-->
        <div class="loading-wrapper" v-show="loading">
            <a-spin class="loading-content" tip="加载中..." />
        </div>
        <!--用做横向打印-->
        <div v-html="stylePrint"></div>
    </div>
</template>
<script>

import { mapState } from "vuex";
import editableCell from "./editTable/EditableCell"
import { save, list, remove, details, examine } from "@/api/production/processRoute";
import searchArchives from '@/components/OrderDynamicForm/searchArchives';
import { Controlwidth } from "@/utils/antTableComponents";

export default {
    components: {
        editableCell,
        searchArchives,
    },
    data () {
        return {
            //----------↓样式----------
            fromStyle: { paddingTop: "8px" },
            labelCol: { span: 10 },
            wrapperCol: { span: 14 },
            editFalse: {
                borderBottom: '1px solid #ded7d7'
            },
            grid: {
                xs: 24,
                sm: 24,
                md: 12,
                lg: 8,
                xl: 8,
                xxl: 6
            },
            btn_grid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            //----------↑样式----------
            // checkType: 3,//物料类型 1:采购 2:销售 3:生产（bom）
            editMask: false,
            dataSource: [],
            isRouterAlive: true,
            dragStartObj: null,     //拖动的目标
            dragEndObj: null,       //目标位置
            dragStartIndex: null,
            dragEndIndex: null,
            thisClickId: null,
            customClick: (record, index) => {
                return {
                    on: {
                        contextmenu: (e) => {//右键事件
                            e.preventDefault();
                            if (index <= this.dataSource.length) {
                                this.openMenu(e);
                                console.log('右键点击的', index);
                                this.thisClickId = index;
                                // this.thisClickRecord = record;
                            }
                        },
                    }
                }
            },
            customTable: (record, index) => {
                return {
                    on: {
                        click: (e) => {
                            this.mouseIndex = record.id;
                            this.orderId = record.id;
                            this.voucherState = record.examineStatus;
                            this.nowRecord = record;
                            this.getDetails(record);
                        }
                    }
                }
            },
            listData: [],
            mouseIndex: null,
            orderId: null,
            nowRecord: [],
            voucherState: 0,
            columnsList: [{
                title: '编码',
                dataIndex: 'code',
                width: 75,
                ellipsis: true,
                sorter: (a, b) => {
                    // this.mouseIndex = null;
                    return a.code.length - b.code.length
                },
                scopedSlots: {
                    filterDropdown: 'filterDropdown',
                    filterIcon: 'filterIcon',
                },
            }, {
                title: '名称',
                dataIndex: 'name',
                ellipsis: true,
                width: 80,
                ellipsis: true,
                sorter: (a, b) => {
                    // this.mouseIndex = null;
                    return a.name.length - b.name.length
                },
                scopedSlots: {
                    filterDropdown: 'filterDropdown',
                    filterIcon: 'filterIcon',
                },
            },
            {
                title: '有效日期',
                dataIndex: 'invalidDate',
                width: 100,
            },
            // {
            //     title: '产品编码',
            //     dataIndex: 'inventoryCode',
            //     width: 80,
            // }, {
            //     title: '产品名称',
            //     dataIndex: 'inventoryName',
            //     width: 80,
            // }, {
            //     title: '规格型号',
            //     dataIndex: 'inventorySpecification',
            //     width: 80,
            // }, 
            {
                title: '状态',
                dataIndex: 'status',
                width: 60,
                customRender: (text, row, index) => {
                    return text == 1 ? '启用' : '禁用';
                },
                scopedSlots: {
                    filterDropdown: 'filterDropdownStatus',
                    filterIcon: 'filterIconStatus',
                },

            }],
            pagination: {
                size: "small"
            },
            columns: [
                {
                    title: '工序号',
                    width: 40,
                    align: 'center',
                    customCell: (record, index) => {
                        return {
                            // FIXME: draggable： true 不生效还不晓得是什么原因，先使用鼠标移入事件设置目标行的draggable属性
                            props: {
                                // draggable: 'true'
                            },
                            style: {
                                // cursor: 'pointer'
                            },
                            on: {
                                // 鼠标移入
                                mouseenter: (event) => {
                                    // 兼容IE
                                    var ev = event || window.event
                                    ev.target.draggable = true;
                                },
                                // 开始拖拽
                                dragstart: (event) => {
                                    // 兼容IE
                                    var ev = event || window.event
                                    // 阻止冒泡
                                    ev.stopPropagation()
                                    // 得到源目标数据
                                    this.dragStartObj = record;
                                    this.dragStartIndex = index;
                                    console.log(record, index, 11111)
                                },
                                // 拖动元素经过的元素
                                dragover: (event) => {
                                    // 兼容 IE
                                    var ev = event || window.event
                                    // 阻止默认行为
                                    ev.preventDefault()
                                },
                                // 鼠标松开
                                drop: (event) => {
                                    // 兼容IE
                                    var ev = event || window.event
                                    // 阻止冒泡
                                    ev.stopPropagation()
                                    // 得到目标数据
                                    this.dragEndObj = record;
                                    this.dragEndIndex = index;
                                    console.log(this.dragEndObj, this.dragEndIndex, 222222)


                                    /* 一，插入 */
                                    // let word_arr = ["depress", "destination", "motion", "rise", "rouse"];
                                    // console.log(word_arr);
                                    // console.log(word_arr.splice(1, 0, "up", "pitch", "up"));
                                    // console.log(word_arr);

                                    // /* 二，删除 */
                                    // let man_arr = ["张三", "李四", "王五"];
                                    // console.log("");
                                    // console.log(man_arr);
                                    // console.log(man_arr.splice(1, 2));
                                    // console.log(man_arr);

                                    // /* 三，替换 */
                                    // let arr = [1, 2, 3, 4, 5, 6, 7, 8];
                                    // console.log(arr);
                                    // console.log(arr.splice(2, 1, "hello"));
                                    // console.log(arr);

                                    this.$nextTick(() => {
                                        console.log(this.dataSource);
                                        console.log(this.dragStartIndex, this.dragEndObj);
                                        this.dataSource.splice(this.dragStartIndex, 1, this.dragEndObj);
                                        this.dataSource.splice(this.dragEndIndex, 1, this.dragStartObj);


                                        let dataRealNumber = 0;
                                        this.dataSource = this.dataSource.filter(item => { return item.workId != null });
                                        dataRealNumber = this.dataSource.length;

                                        for (let i = 0; i < this.dataSource.length; i++) {

                                            if (dataRealNumber == 1) {
                                                this.dataSource[i].workFlag = 1;
                                            }
                                            if (dataRealNumber == 2) {
                                                this.dataSource[1].workFlag = 2;
                                                this.dataSource[0].workFlag = 1;
                                            }
                                            if (dataRealNumber > 2 && i != 0 && i != this.dataSource.length - 1) {
                                                this.dataSource[i].workFlag = 3
                                                this.dataSource[0].workFlag = 1
                                                this.dataSource[this.dataSource.length - 1].workFlag = 2;
                                            }
                                        }

                                        if (this.dataSourceNumber - dataRealNumber > 0) {
                                            for (let i = 0; i < this.dataSourceNumber - dataRealNumber; i++) {
                                                this.dataSource.push({})
                                            }
                                        }

                                        this.reload();
                                    })

                                }
                            },
                        }
                    },
                    customRender: (text, row, index) => {
                        // if (index == 0 || index == this.dataSource.length - 1) {
                        //     return <span style="cursor:not-allowed">{index + 1}</span>;
                        // } else {
                        return <span style="cursor:move;display:block">{index + 1}</span>;
                        // }
                    }
                }, {
                    title: '工序编码',
                    dataIndex: 'workCode',
                    width: 100,
                    scopedSlots: { customRender: 'workCode' },
                    ellipsis: true,
                }, {
                    title: '工序名称',
                    dataIndex: 'workName',
                    width: 100,
                    scopedSlots: { customRender: 'workName' },
                    ellipsis: true,
                }, {
                    title: '加工方式',
                    dataIndex: 'processMethod',
                    width: 100,
                    scopedSlots: { customRender: 'processMethod' },
                }, {
                    title: '工序标识',
                    dataIndex: 'workFlag',
                    width: 100,
                    scopedSlots: { customRender: 'workFlag' },
                }, {
                    title: '检验方式',
                    dataIndex: 'inspectMethod',
                    width: 100,
                    scopedSlots: { customRender: 'inspectMethod' },
                }, {
                    title: '质检标准',
                    dataIndex: 'qualityStandard',
                    width: 100,
                    scopedSlots: { customRender: 'qualityStandard' },
                },
                {
                    title: '工艺要求',
                    dataIndex: 'processRequire',
                    width: 100,
                    scopedSlots: { customRender: 'processRequire' },
                    ellipsis: true,
                }, {
                    title: '备注',
                    dataIndex: 'remarks',
                    width: 200,
                    scopedSlots: { customRender: 'remarks' },
                    ellipsis: true,
                }],
            visible: false,
            top: 0,
            left: 0,
            editColumnArraya: [],
            dataSourceNumber: 12,//默认渲染多少行表格数据
            dataJson: {
                "code": null,         //工艺编码
                "name": null,         //工艺名称
                "inventoryCode": null, //物料编码
                "inventoryName": null, //物料名称
                "inventoryId": null,   //物料id
                "inventorySpecification": null,    //规格型号
                "productionType": null,    //生产类型
                "invalidDate": null,   //有效日期
                "versionCode": null,   //版本号
                "remarks": null,       //描述
                "unitId": null,        //计量单位id
                "unitName": null,      //计量单位名称
                "status": 1,
                "processRouteDetails": [],//工艺明细
                "remarks": null,
            },
            //物料
            maskArchives: false,
            inventoryDomTop: null,
            inventoryDomRight: null,
            inputVal: null,
            selectedRowKeys: [],
            selectedData: [],
            searchInventoryCode: null,//编码搜索
            searchStatus: '2',//状态搜索
        };
    },
    created () {
        this.tableInit();//初始化表格
        this.editColumnArray(this.columns);
        this.getList();//获取工序路线列表
    },
    updated () {
        Controlwidth("route_tb", 50);
        Controlwidth("process_edit_tb", 50);
    },
    watch: {
        visible (value) {
            if (value) {
                document.body.addEventListener("click", this.closeMenu);
            } else {
                document.body.removeEventListener("click", this.closeMenu);
            }
        },
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    methods: {
        tableInit () {
            for (let i = 0; i < this.dataSourceNumber; i++) {
                this.dataSource.push({})
            }
            this.reload();
            console.log(this.dataSource)
        },
        reload () {
            //强制刷新表格
            this.isRouterAlive = false;
            this.$nextTick(function () {
                this.isRouterAlive = true;
            });
        },
        newProcess () {
            //新增（初始化数据）
            this.dataSource = [];
            this.mouseIndex = null;
            this.editMask = false;
            this.tableInit();
            this.dataJson = {
                status: 1
            };
            this.orderId = null;
            this.voucherState = 0;
        },
        openMenu (e) {
            //显示右键菜单
            var x = e.pageX - 250;
            var y = e.pageY - 40;
            this.top = y;
            this.left = x;
            this.visible = true;
        },
        closeMenu () {
            //隐藏右键菜单
            this.visible = false;
        },
        handleAdd () {
            //新增数据
            const { count, dataSource } = this;
            const newData = {};
            this.$nextTick(() => {
                this.dataSource.splice(this.dataSource.length, 0, newData);
            })
            console.log('新增行：', this.dataSource)
        },
        handleDelete () {
            //删除整行
            let _this = this;
            let numberId = this.thisClickId;
            console.log(numberId);
            this.$confirm({
                title: "确认",
                content: (
                    <span>
                        您确定要{<span style="color:red;">删除</span>}该记录吗？
                    </span>
                ),
                onOk () {
                    let dataSource = [..._this.dataSource];
                    console.log(_this.dataSource.length);
                    if (dataSource.length - 1 > _this.dataSourceNumber) {
                        //大于规定行数(删除)
                        _this.dataSource = dataSource.filter((item, index) => index !== numberId);
                    } else {
                        //小于规定行数(清空)
                        for (let i = 0; i < dataSource.length; i++) {
                            if (i === numberId) {
                                for (const key in dataSource[i]) {
                                    if (key != 'number') {
                                        dataSource[i][key] = ""
                                    }
                                }
                            }
                        }
                        _this.dataSource = dataSource;
                    }


                    _this.reload();
                },
                onCancel () { },
            });
        },
        onChangeDate (v, s) {
            this.dataJson.invalidDate = s;
        },
        onCellChange (indexTable, dataIndex, value) {
            const dataSource = [...this.dataSource];
            const target = dataSource.find((item, index) => index === indexTable);
            console.log(target, dataIndex, value, indexTable);

            this.$set(target, dataIndex, value)
            if (dataIndex == 'workCode' || dataIndex == 'workName') {
                if (value) {
                    target['workCode'] = value.code;
                    target['workId'] = value.id;
                    target['workName'] = value.name;
                    target['processMethod'] = value.processMethod;
                } else {
                    target['workCode'] = null;
                    target['workId'] = null;
                    target['workName'] = null;
                    target['processMethod'] = null;
                }
            }

            this.$nextTick(() => {
                this.dataSource = dataSource;
                console.log('明细数据：', this.dataSource)
                //第一条数据工序标识是首工序

                let dataRealNumber = 0;
                this.dataSource = this.dataSource.filter(item => { return item.workId != null });
                dataRealNumber = this.dataSource.length;

                for (let i = 0; i < this.dataSource.length; i++) {

                    if (dataRealNumber == 1) {
                        this.dataSource[i].workFlag = 1;
                    }
                    if (dataRealNumber == 2) {
                        this.dataSource[1].workFlag = 2;
                        this.dataSource[0].workFlag = 1
                    }
                    if (dataRealNumber > 2 && i != 0 && i != this.dataSource.length - 1) {
                        this.dataSource[i].workFlag = 3;
                        this.dataSource[0].workFlag = 1
                        this.dataSource[this.dataSource.length - 1].workFlag = 2;
                    }
                }

                if (this.dataSourceNumber - dataRealNumber > 0) {
                    for (let i = 0; i < this.dataSourceNumber - dataRealNumber; i++) {
                        this.dataSource.push({})
                    }
                }

                console.log(indexTable, this.dataSource.length)
                if (indexTable + 1 == this.dataSource.length) {
                    this.dataSource.push({})
                }

                this.reload();
            })

        },

        //获取可编辑的列名
        editColumnArray (column) {
            let editcloumn = [];
            column.forEach((item, index) => {
                editcloumn.push(item.dataIndex);
            });
            this.editColumnArraya = editcloumn;
        },

        //列表
        getList (searchArray) {
            let postData = {
                "current": 1,
                "size": -1
            }
            if (searchArray) {
                if (Object.keys(searchArray).length > 0) {
                    postData = Object.assign(postData, searchArray);
                }
            }
            list(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.listData = records;
                    this.listData.forEach(item => {
                        item.key = item.id;
                    });
                    //如果有列表数据，选中第一条
                    console.log(this.orderId)
                    if (this.listData.length > 0 && this.orderId == null) {
                        this.mouseIndex = this.listData[0].id;
                        this.orderId = this.listData[0].id;
                        this.voucherState = this.listData[0].examineStatus;
                        this.nowRecord = this.listData[0];
                        this.getDetails(this.listData[0]);
                    }

                    if (this.orderId) {
                        this.listData.forEach(item => {
                            if (item.id == this.orderId) {
                                this.getDetails(item);
                            }
                        });
                    }
                }
            }).catch(error => { });
        },
        //保存
        submit () {
            this.dataJson.processRouteDetails = this.dataSource.filter(item => { return item.workName });

            for (let i = 0; i < this.dataJson.processRouteDetails.length; i++) {
                this.dataJson.processRouteDetails[i].workOrder = i + 1;
            }
            console.log(this.dataJson.processRouteDetails);
            if (this.dataJson.name == '' || this.dataJson.name == null) {
                this.$message.warning('工艺路线名称必须填写')
                return;
            }
            if (this.dataJson.code == '' || this.dataJson.code == null) {
                this.$message.warning('工艺路线编码必须填写')
                return;
            }
            console.log(this.dataJson.processRouteDetails)
            if (JSON.stringify(this.dataJson.processRouteDetails) == '[]') {
                this.$message.warning('工艺明细不能为空')
                return;
            }
            let requestData = this.dataJson;
            save(requestData).then(response => {
                if (response.code === 200) {
                    this.$message.success('保存成功');
                    // this.newProcess();
                    this.getList();
                } else {
                    this.$message.error(response.message);
                }
            }).catch((e) => {
                // this.isSaveRun = true;
            })
        },
        removeData () {
            //删除
            // if (this.selectedRowKeys.length != 1) {
            //     this.$message.warning('请选择一条数据');
            //     return;
            // }

            if (!this.orderId) {
                this.$message.warning('请选择一条数据');
                return;
            }

            let _this = this;
            this.$confirm({
                title: `是否确认删除工序 "${_this.nowRecord.name}"`,
                content: "",
                onOk () {
                    remove({ id: _this.orderId }).then(response => {
                        if (response.code === 200) {
                            _this.$message.success('删除成功');
                            _this.selectedRowKeys = [];
                            _this.selectedData = [];
                            _this.newProcess();
                            _this.getList();
                        } else {
                            _this.$message.error(response.message);
                        }
                    }).catch((e) => {
                    })
                },
                onCancel () { }
            });
        },
        handlInputArchives (type, ref) {
            // console.log(this.$refs.searchArchivesRef,this.inputType)
            let w = document.body.clientWidth;//当前可视窗口宽度

            this.maskArchives = true;

            if (w < 1600) {
                this.inventoryDomTop = 240;
            } else {
                this.inventoryDomTop = 195;
            }
        },
        closeArchives () {
            this.maskArchives = false;
        },
        checkArchives (data) {
            this.maskArchives = false;
            console.log(data);
            //返回值处理
            this.dataJson.inventoryId = data[0][0].id;
            this.dataJson.inventoryCode = data[0][0].inventoryCode;
            this.dataJson.inventoryName = data[0][0].inventoryName;
            this.dataJson.inventorySpecification = data[0][0].inventorySpecification;
            this.dataJson.unitId = data[0][0].unitId;
            this.dataJson.unitName = data[0][0].unitName;
        },
        rowClassName (record, index) {
            return this.mouseIndex == record.id ? 'hoverRowStyl' : '';
        },
        handleArchiveChange (t) {
            //物料编码搜索
            if (t == 1) {
                this.inputVal = this.dataJson.inventoryCode;
            } else if (t == 2) {
                this.inputVal = this.dataJson.inventoryName;
            }
            this.$refs.searchArchivesRef.inputVal = this.inputVal;
            this.$refs.searchArchivesRef.getData(1);
        },
        onSelectChange (keys, data) {
            this.selectedRowKeys = keys;
            this.selectedData = data;
            console.log(keys, data)
        },
        getDetails (record) {
            this.editMask = true;
            let requestData = {
                id: record.id
            }
            details(requestData).then(response => {
                if (response.code === 200) {
                    record.createDate = '';
                    record.updateDate = '';
                    this.dataJson = JSON.parse(JSON.stringify(record));;
                    this.dataSource = JSON.parse(JSON.stringify(response.data));
                    if (this.dataSource.length < this.dataSourceNumber) {
                        for (let i = 0; i < this.dataSourceNumber - response.data.length; i++) {
                            this.dataSource.push({})
                        }
                    }
                    this.reload();
                } else {
                    this.$message.error(response.message);
                }
            }).catch((e) => { })
        },
        editClick () {
            this.editMask = false;
        },
        //审核
        auditClick (type) {
            let requestData = {
                id: this.orderId,
                status: type
            }
            examine(requestData).then((response) => {
                if (response.code === 200) {
                    if (type == 1) {
                        this.$message.success('审核成功');
                        this.getList();
                        this.voucherState = 1;
                    }
                    if (type == 0) {
                        this.$message.success('弃审成功');
                        this.getList();
                        this.voucherState = 0;
                    }
                } else {
                    // this.$message.warning(response.message);
                }
            })
        },
        handleSearch (key, confirm, col) {
            //table搜索
            confirm();
            console.log(key, confirm, col)
            this.searchInventoryCode = key[0];

            let searchText = { 'searchKey': this.searchInventoryCode }
            this.getList(searchText)
        },
        handleReset (clearFilters) {
            clearFilters();
            this.searchInventoryCode = '';
            this.getList()
        },
        handleSearchStatus (key, confirm, col) {
            //状态搜索
            confirm();
            console.log(key, confirm, col)
            // this.searchStatus = key[0];

            let searchText = { 'status': this.searchStatus == '2' ? '' : this.searchStatus }
            this.getList(searchText)
        },
        handleChangeStatus (e, v) {
            console.log(e)
            if (e == '2') {
                this.searchStatus = '';
            }
            this.searchStatus = e;

        }
    }
};
</script>
<style lang="less">
    @import '~@/style/purchase/voucher.less';
    .credentials-wrapper {
        padding: 12px 10px 0;
        height: auto;
        overflow-y: auto;
        font-size: 14px;
        .ant-form-item {
            margin: 0;
        }
        .mask-archives {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            // background: rgba(220, 53, 69, 0.5);
            background: rgba(0, 0, 0, 0);
            z-index: 2;
        }
        .ant-table-tbody > tr > td {
            cursor: pointer;
        }
        .hoverRowStyl {
            background-color: rgba(24, 144, 255, 0.2);
            td {
                color: #222;
            }
        }
        .ant-table colgroup > col.ant-table-selection-col {
            width: 30px;
        }
        .edit-mask-route {
            width: calc(100% - 22px);
            height: calc(100% - 50px);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 800;
            background: rgba(255, 255, 255, 0.1);
        }
    }
    .tabbl {
        // .ant-table-scroll {
        //     height: 366px !important;
        // }
        padding: 10px;
        .ant-table-wrapper .ant-table-pagination {
            text-align: right !important;
        }
    }
    .order-dynamic-form-wrapper {
        label:not(.form-check-label):not(.custom-file-label) {
            font-weight: normal;
        }
        .ant-form-item-label,
        .ant-form-item-control {
            line-height: 32px;
        }
    }

    .atable-edit {
        .ant-table-tbody > tr > td {
            padding: 0px 2px !important;
            overflow: hidden;
        }
    }

    .drag-line-top td {
        border-top: 1px dashed #1890ff;
    }

    .drag-line-bottom td {
        border-bottom: 1px dashed #1890ff !important;
    }
</style>